@import 'variables';
@import 'mixins/breakpoints';
@import 'mixins/media';

.selectable {
  cursor: pointer;

  &:hover,
  &:focus,
  &:active {
    background-color: $gray-200;
  }
}

.w-25 {
  width: 25% !important;
}

.w-50 {
  width: 50% !important;
}

.w-75 {
  width: 75% !important;
}

.w-100 {
  width: 100% !important;
}

.z-100 {
  z-index: 100 !important;
}

.z-1000 {
  z-index: 1000 !important;
}

.z-10000 {
  z-index: 10000 !important;
}

.z-100000 {
  z-index: 100000 !important;
}

.text-right {
  text-align: right;
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.color-link {
  color: $blue;
}

.outline-none {
  outline: none;
}

.custom-scroll {
  overflow: auto;
  overflow-x: hidden;

  &::-webkit-scrollbar {
    width: $space-x1;
    border-radius: $space-x4;
  }

  &::-webkit-scrollbar-thumb {
    background-color: $lightSapphire;
    border-radius: $space-x4;
  }
}

.d-none {
  display: none;
}

.d-block {
  display: block;
}

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-up-breakpoint($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    .flex#{$infix}-row {
      flex-direction: row !important;
    }
    .flex#{$infix}-column {
      flex-direction: column !important;
    }
    .flex#{$infix}-row-reverse {
      flex-direction: row-reverse !important;
    }
    .flex#{$infix}-column-reverse {
      flex-direction: column-reverse !important;
    }

    .flex#{$infix}-wrap {
      flex-wrap: wrap !important;
    }
    .flex#{$infix}-nowrap {
      flex-wrap: nowrap !important;
    }
    .flex#{$infix}-wrap-reverse {
      flex-wrap: wrap-reverse !important;
    }
    .flex#{$infix}-fill {
      flex: 1 1 auto !important;
    }
    .flex#{$infix}-grow-0 {
      flex-grow: 0 !important;
    }
    .flex#{$infix}-grow-1 {
      flex-grow: 1 !important;
    }
    .flex#{$infix}-shrink-0 {
      flex-shrink: 0 !important;
    }
    .flex#{$infix}-shrink-1 {
      flex-shrink: 1 !important;
    }

    .justify-content#{$infix}-start {
      justify-content: flex-start !important;
    }
    .justify-content#{$infix}-end {
      justify-content: flex-end !important;
    }
    .justify-content#{$infix}-center {
      justify-content: center !important;
    }
    .justify-content#{$infix}-between {
      justify-content: space-between !important;
    }
    .justify-content#{$infix}-around {
      justify-content: space-around !important;
    }

    .align-items#{$infix}-start {
      align-items: flex-start !important;
    }
    .align-items#{$infix}-end {
      align-items: flex-end !important;
    }
    .align-items#{$infix}-center {
      align-items: center !important;
    }
    .align-items#{$infix}-baseline {
      align-items: baseline !important;
    }
    .align-items#{$infix}-stretch {
      align-items: stretch !important;
    }

    .align-content#{$infix}-start {
      align-content: flex-start !important;
    }
    .align-content#{$infix}-end {
      align-content: flex-end !important;
    }
    .align-content#{$infix}-center {
      align-content: center !important;
    }
    .align-content#{$infix}-between {
      align-content: space-between !important;
    }
    .align-content#{$infix}-around {
      align-content: space-around !important;
    }
    .align-content#{$infix}-stretch {
      align-content: stretch !important;
    }

    .align-self#{$infix}-auto {
      align-self: auto !important;
    }
    .align-self#{$infix}-start {
      align-self: flex-start !important;
    }
    .align-self#{$infix}-end {
      align-self: flex-end !important;
    }
    .align-self#{$infix}-center {
      align-self: center !important;
    }
    .align-self#{$infix}-baseline {
      align-self: baseline !important;
    }
    .align-self#{$infix}-stretch {
      align-self: stretch !important;
    }

    .text#{$infix}-right {
      text-align: right !important;
    }
    .text#{$infix}-center {
      text-align: center !important;
    }
  }
}

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-up-breakpoint($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    @each $value in $displays {
      .d#{$infix}-#{$value} {
        display: $value !important;
      }
    }
  }
}

.border {
  border: $borderPrimary;
}

.border-none {
  border: none;
}

.border-left-none {
  border-left: none;
}

.border-right-none {
  border-right: none;
}

.border-top-none {
  border-top: none;
}

.border-bottom-none {
  border-bottom: none;
}

.border-top {
  border-top: $borderPrimary;
}

.border-bottom {
  border-bottom: $borderPrimary;
}

.border-left {
  border-left: $borderPrimary;
}

.border-right {
  border-right: $borderPrimary;
}

.overflow-auto {
  overflow: auto;
}

.bg-gray-50 {
  background-color: $gray-50;
}

.bg-gray-100 {
  background-color: $gray-100;
}
